<template>
    <div>
        <div class="topbar">
            <div class="topbar-left"></div>
            <div class="topbar-text">分类</div>
            <div class="topbar-right"></div>
        </div>

        <van-tree-select height="83vh" :items="items" :main-active-index.sync="active">
            <template #content>
                <div class="jxrs"  v-if="active === 0">
                    <div class="right-content" v-if="active === 0">
                        <div class="banner"><img src="https://t00img.yangkeduo.com/goods/2019-11-20/0c7cbcf6a07241f8ac9feea5002a498e.jpeg?imageMogr2/strip%7CimageView2/2/w/750/q/80" alt=""></div>
                    </div>
                    <p>热搜手机</p>
                    <div class="jxrs-item" v-for="(item,index) in list" :key="index">
                        <img :src="item.mainImage" alt="">
                        <span>{{item.name}}</span>
                    </div>
                </div>
                <div class="jxrs"  v-if="active === 1">
                    <p>热搜手机</p>
                    <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="上滑加载下一页"
                        @load="onLoad"
                        >
                        <van-cell class="jxrs-item" v-for="(item,index) in list" :key="index">
                            <img :src="item.mainImage" alt="">
                                <span>{{item.name}}</span>
                            </van-cell>
                    </van-list>
                </div>
            </template>
        </van-tree-select>

         <van-tabbar v-model="activetab">
            <van-tabbar-item  class="iconfont icon-home2" to="/index">首页</van-tabbar-item>
            <van-tabbar-item  class="iconfont icon-tuijianliebiao" to="/Recommend">推荐</van-tabbar-item>
            <van-tabbar-item  class="iconfont icon-fenlei" to="/Classify">分类</van-tabbar-item>
            <van-tabbar-item  class="iconfont icon-liaotian" to="Chat">聊天</van-tabbar-item>
            <van-tabbar-item  class="iconfont icon-leimupinleifenleileibie" to="My">个人中心</van-tabbar-item>
        </van-tabbar>
                
    </div>
  
</template>
<script>

    export default {
        name: '',
        components: { 
            
        },
        computed: { 
        },
        data() {
            return {
                TopbackgroundColor:'#f40',
                loading: false,
                finished: false,
                activetab: 2,
                active: 0,
                total:0,
                items: [
                    { text: '京喜推荐' }, 
                    { text: '时尚女装' },
                    { text: '潮流男装' }, 
                    { text: '清洁纸品' }, 
                    { text: '食品酒水' }, 
                    { text: '厨房配件' },
                    { text: '手机数码' }, 
                    { text: '家用电器' },
                    { text: '美妆个护' }, 
                    { text: '鞋靴箱包' },
                    { text: '生鲜果蔬' }, 
                    { text: '母婴童装' },
                    { text: '汽车用品' },
                    { text: '电脑办公' },
                    { text: '家具建材' },
                    { text: '珠宝钟表' },
                    { text: '珠宝钟表' },
                    { text: '运动户外' },
                    { text: '图书音像' },
                    { text: '礼品鲜花' },
                    { text: '医药健康' },
                    { text: '二手商品' },
                ],
                list:[
                    {
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/95160/39/11728/4634/5e3af124Ed22549ff/0498424877cb1dbb.jpg!q70.dpg.webp',
                        name:'面条'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/95948/6/11616/7537/5e3ae297Ec3c1aabf/b66274f1dac31ba7.jpg!q70.dpg.webp',
                        name:'大米'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/90184/40/11600/21707/5e3af190Ed62d6450/db4219eacfada539.png.webp',
                        name:'速冻食品'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/95010/5/11626/6502/5e3ae322E38202571/dff3319b8e3ada82.jpg!q70.dpg.webp',
                        name:'食用油'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/86925/30/11798/10663/5e3ae32bE9fedabc4/d751c594621934e3.jpg!q70.dpg.webp',
                        name:'方便面'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/101093/18/11626/7940/5e3ae336E2df65266/630fe69db3c29ef5.jpg!q70.dpg.webp',
                        name:'调味剂'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/103694/14/11826/5213/5e3af1f8E0ef6e086/2e0bc57e7ecba0e2.jpg!q70.dpg.webp',
                        name:'纯净水'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/93565/7/11871/13401/5e3ae450E5b15a763/43dd2afaeafa4637.jpg!q70.dpg.webp',
                        name:'牛奶'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/103704/27/11633/11000/5e3af792Ee8f97d59/6c9cf58894d1689b.jpg!q70.dpg.webp',
                        name:'水果'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/94372/21/11819/36219/5e3ae3e8E361fe882/bd924107dfab5599.png.webp',
                        name:'熟食'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/109292/18/5589/11547/5e3af23fE21e1a4c9/de48a7dac87d09ff.jpg!q70.dpg.webp',
                        name:'休闲零食'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/97340/27/11827/10691/5e3ae383Ecaccd4fe/75a1135a3c1684e5.jpg!q70.dpg.webp',
                        name:'饼干蛋糕'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/106378/27/11344/14072/5e31a82bE11b3dbac/9ebde77bf63883da.png.webp',
                        name:'口罩'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/84743/3/11297/6273/5e31831aEf4bb639f/4a3d7c802f56bb63.jpg!q70.dpg.webp',
                        name:'消毒液'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/87756/5/11697/16408/5e3af27dEb968e7f2/760badf87a3a1524.png.webp',
                        name:'洗手液'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/100062/20/11732/12451/5e3ae536Eb07f7d1f/82d1037ba335e2b3.png.webp',
                        name:'抑菌香皂'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/101937/27/11822/14663/5e3ae4c4E2a395954/130ccba2935b8128.png.webp',
                        name:'除菌液'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t21418/192/1647444509/8186/f50c41e5/5b309dffNc334ca02.jpg!q70.dpg.webp',
                        name:'洗衣液'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/91676/3/11627/4180/5e3aeeceE0fb9169b/4e5c47916c0724e3.jpg!q70.dpg.webp',
                        name:'一次性用品'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/103048/5/11450/6285/5e3af2bfE7ad0f4f2/68e22c9071d1b851.jpg!q70.dpg.webp',
                        name:'垃圾袋'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/110496/7/5466/5126/5e3af7a7E73b21c56/c3398bcaa42bfe3a.jpg!q70.dpg.webp',
                        name:'抽纸'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/95867/38/11755/25281/5e3ae510Eaa5811c1/af493990691537b5.png.webp',
                        name:'空气净化器'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/85407/34/11833/12696/5e3ae51aE6114f7c8/eef7506ad5745a5e.jpg!q70.dpg.webp',
                        name:'消毒柜'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/109517/30/5549/5020/5e3aeed7Eae838859/0dcc00712e949cbc.jpg!q70.dpg.webp',
                        name:'杀菌灯'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/91140/37/11568/6855/5e3aeee1Ed093c542/56d0c841a3b8616c.jpg!q70.dpg.webp',
                        name:'瑜伽垫'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/93851/30/11611/4870/5e3af2e7Ec4c583d0/9735e8971f58f2bf.jpg!q70.dpg.webp',
                        name:'跑步机'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/85670/11/11905/5423/5e3af2fcE01be9174/9cb622a2a27ef36a.jpg!q70.dpg.webp',
                        name:'跳绳'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/78872/24/13239/42366/5da82f06E1e91c719/91b93c874e84cee7.png.webp',
                        name:'家居服'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/44418/4/11434/25520/5d7f61afE0da01b3d/f78507b69a559e49.png.webp',
                        name:'拖鞋'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t27478/237/991327140/17254/8bbb2f05/5bbebd6cN3fb15bff.jpg!q70.dpg.webp',
                        name:'休闲鞋'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/56471/33/10911/15977/5d7f47e5Ed83fd6b3/4a2bc67680322f29.png.webp',
                        name:'蓝牙耳机'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t26581/315/994962209/11599/2299b72c/5bbebd23N2edbafd9.png.webp',
                        name:'休闲裤'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/91786/35/147/28113/5da82ddfEd53e2fb1/1abe076c3b87dba9.png.webp',
                        name:'针织衫'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/46505/28/13530/15894/5da82eaaEc2cd1e64/8428344f62dd94af.png.webp',
                        name:'卫衣'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t24862/84/1931199610/24265/888ef955/5bbeb623N6e298e23.png.webp',
                        name:'休闲棉袜'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/26423/22/11/12803/5c0653a1E1c1cfe57/f03d1d685db7e5eb.png.webp',
                        name:'保温杯'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/31954/37/13262/12279/5cb9a1f6Ea02b0c9f/a7de7c12f11f849f.jpg!q70.dpg.webp',
                        name:'多肉植物'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t20092/16/2111667654/30091/9e233cc8/5b309f90Nf2be75d5.png.webp',
                        name:'面膜'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/76349/36/10432/10358/5d7f47feE5c2763ab/0ab3a647127a1e0c.png.webp',
                        name:'吃鸡神器'
                    },{
                        id:0,
                        mainImage:'//img10.360buyimg.com/mobilecms/jfs/t1/59621/35/14762/20408/5dc5307fE8d62372b/b516b2a6475a87ea.png.webp',
                        name:'厨房小工具'
                    },
                ]
            }
        },
        mounted() {
         
        },
        methods: {
           
            onLoad() {
                


                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求

                this.axios.get("/products", {
                    params: {
                    categoryId: "100012",
                   // pageSize: 9
                    }
                }).then(res => {
                    
                    this.list = res.data.list;
                    console.log(res);
                     for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                        
                    }
                    // 加载状态结束
                    this.loading = false;
                    this.total = res.data.total; 
                    // 数据全部加载完成
                    if (this.list.length >= 40000) {
                        this.finished = true;
                    }
                })
               
            },
        }
        
    }
</script>

<style lang="scss" scoped>
    .topbar{
      width:100vw;
      height:7vh;
      line-height:7vh;
      font-size:0.9rem;
      // background:rgba(255,255,255,1);
      background:yellowgreen;
      color:#333;
      position:fixed;
      left:0;
      top:0;
      z-index:100;
      display:flex;
     
      .topbar-left{
          flex:1;
          text-align:center;
      }
      .topbar-text{
          flex:4;
          text-align:center;
      }
      .topbar-right{
          flex:1;
          text-align:center;
      }
    }
    .van-tree-select{
        margin-top:7vh;
    }
    .container-top .topbar[data-v-e9b8ddb0]{
        background:#eee;
    }
   
   
    .van-sidebar-item--select::before {
        background-color: rgba(0,0,0,0);
    }
    .van-sidebar-item--select, .van-sidebar-item--select:active {
        color:#f40;
    }

    .van-tree-select__nav-item {
        font-size: 0.8rem;
    }
    .van-tree-select__content{
        flex:2.9;
    }

    .right-content{
        margin-top:1vh;
        .banner{
            width:100%;
            padding:0 5%;
            box-sizing:border-box;
            img{
                width:100%;
                height:13vh;
            }
        }
    }

    .jxrs{
            width:100%;
            height:auto;
            float:left;
        p{
           
            width:100%;
            line-height:5vh;
            font-size:0.7rem;
            font-weight:600;
            padding: 0 5%;
            box-sizing:border-box;
            float:left;
         
        }
        .jxrs-item{
                width:33%;
                padding: 2vh 2vw;
                float:left;
            img{
                width:70%;
                margin: 0 15%;
            }
            span{
                display:inline-block;
                width:100%;
                font-size:0.7rem;
                text-align:center;
                font-size:0.6rem;

            }
        }
        
    }
    



    


//////////////////////////
    .iconfont{
    font-size:0.7rem;
    }
    .iconfont:before{
        font-size:1rem;
    }
    






</style>
